import React, { useEffect, useState } from "react"
import { StyleSheet, Text, View, TouchableWithoutFeedback, Dimensions, TouchableHighlight, StatusBar } from 'react-native';
import { useSelector } from "react-redux";

// 设备宽度，单位 dp
const deviceWidthDp = Dimensions.get('window').width;
// 设计稿宽度（这里为640px），单位 px
const uiWidthPx = 375;
const pTd = (uiElePx) => {
    return uiElePx * deviceWidthDp / uiWidthPx;
}

const CreateCopy = ({ navigation }) => {

    const mnemonicStr = useSelector((state) => state.singleSignReducer.mnemonicStr);
    const [mnemonic, setmnemonic] = useState([])
    const [mnemonictwo, setmnemonictwo] = useState([])
    const [mnemonicthree, setmnemonicthree] = useState([])
    const [tipInfo, setTipInfo] = useState('Please enter it again!')

    const next = () => {
        navigation.navigate('create-review')
    }

    const back = () => {
        navigation.goBack()
    }

    useEffect(() => {
        if (mnemonicStr) {
            let keyword = mnemonicStr.split(" ")
            let keywordtwo = mnemonicStr.split(" ")
            keywordtwo = keywordtwo.sort(function () {
                return Math.random() - 0.5
            })
            setmnemonic(keyword)
            setmnemonictwo(keywordtwo)
        }
    }, [])

    const clickit = (index) => {
        if (mnemonicthree.length != 0) {
            if (mnemonicthree.length <= 12) {
                if (!mnemonicthree.includes(mnemonictwo[index])) {
                    keywordthree = mnemonicthree
                    keywordthree.push(mnemonictwo[index])
                    setmnemonicthree([...keywordthree])
                }
                if (mnemonicthree.length == 12) {
                    if (mnemonic.toString() == mnemonicthree.toString()) {
                        setTipInfo('Mnemonic verification succeeded')
                    } else {
                        setTipInfo('Mnemonic error!')
                    }
                }
            }
        } else {
            let keywordthree = mnemonicthree
            keywordthree.push(mnemonictwo[index])
            setmnemonicthree([...keywordthree])
        }

    }

    const deletit = (index) => {
        let keywordthree = []
        keywordthree = mnemonicthree
        keywordthree.splice(index, 1)
        setmnemonicthree([...keywordthree])
    }

    return (
        <View style={styles.container}>
            <StatusBar backgroundColor='#F6F6F9' barStyle='dark-content' />
            <View style={{
                paddingLeft: 18,
                paddingRight: 18,
                paddingTop: 24
            }}>
                <View>
                    <TouchableWithoutFeedback onPress={back}>
                        <Text style={styles.backtext}>Forgot to copy? back</Text>
                    </TouchableWithoutFeedback>
                </View>
                <View style={styles.topbox}>
                    <View style={styles.top_title_box}>
                        <Text style={{ fontSize: 17, color: "#000", marginTop: 32 }}>Have you copied the mnemonics?</Text>
                        <Text style={{ fontSize: 20, color: "#F25B24", marginTop: 21, fontWeight: "bold" }}>{tipInfo}</Text>
                    </View>
                    <View style={styles.inner}>
                        {mnemonicthree.map((items, index) => {
                            return (
                                <View style={styles.inner_box} key={index}>
                                    <TouchableWithoutFeedback onPress={() => deletit(index)}>
                                        <Text style={styles.inner_box_text}>{items} </Text>
                                    </TouchableWithoutFeedback>
                                </View>
                            )
                        })}
                    </View>
                </View>
            </View>
            {tipInfo == 'Mnemonic verification succeeded' ?
                <View style={{ flex: 1, justifyContent: 'flex-end', alignItems: 'center', marginBottom: pTd(100) }}>
                    <TouchableHighlight style={styles.button} underlayColor='#5662EA' onPress={next} >
                        <Text style={{ fontSize: pTd(16), color: "#5A8EBE", textAlign: "center", lineHeight: pTd(44) }}>Confirm</Text>
                    </TouchableHighlight >
                </View>
                :
                <View style={styles.bottmbox}>
                    {
                        mnemonictwo.map((items, index) => {
                            return (
                                <View style={{ ...styles.bottom_inner_box, backgroundColor: mnemonicthree.includes(items) ? "#e3e3e3" : "#fff" }} key={index} >
                                    <TouchableHighlight underlayColor='#E3E3E3' onPress={() => clickit(index)}  >
                                        <Text style={{ ...styles.bottom_inner_box_text, borderColor: mnemonicthree.includes(items) ? "#fff" : "#e3e3e3" }}>{items}</Text>
                                    </TouchableHighlight>
                                </View>
                            )
                        })
                    }
                </View>
            }

        </View >
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        position: "relative",
        backgroundColor: "#F6F6F9",

    },
    backtext: {
        fontSize: pTd(14),
        color: "#666666",
        marginLeft: 18
    },
    topbox: {
        height: pTd(350),
        width: "100%",
        backgroundColor: "#fff",
        marginTop: pTd(15),
        borderRadius: pTd(8),
        paddingLeft: 8
    },
    top_title_box: {
        width: "100%",
        height: 120,
        borderBottomColor: "#707070",
        borderBottomWidth: 1,
        alignItems: "center",
    },
    inner_box: {
        height: pTd(39),
        width: pTd(98),
        borderColor: "#D3D3D3",
        borderWidth: 1,
        marginLeft: 5,
        marginRight: 5,
        marginTop: 8
    },
    inner: {
        width: "100%",
        marginTop: 14,
        flexDirection: "row",
        flexWrap: "wrap"
    },
    inner_box_text: {
        fontSize: 13,
        color: "#5A72EC",
        textAlign: "center",
        lineHeight: pTd(39)
    },
    bottmbox: {
        width: "100%",
        height: pTd(177),
        backgroundColor: "#fff",
        position: "absolute",
        bottom: 0,
        flexDirection: "row",
        flexWrap: "wrap"
    },
    bottom_inner_box: {
        height: pTd(45),
        width: "33.33333%",
        textAlign: "center"
    },
    bottom_inner_box_text: {
        textAlign: "center",
        lineHeight: pTd(45),
        color: "#898989",
        borderColor: "#E3E3E3",
        borderWidth: 1
    },
    button: {
        width: pTd(314),
        height: pTd(44),
        borderColor: "#D1D1D1",
        borderWidth: 1,
        backgroundColor: "#fff",
        borderRadius: 4
    }
})

export default CreateCopy